<template>
  <div>
    <div class="container">
      <el-page-header @back="goBack" content="" style="padding-bottom: 40px">
        <template v-if="optType === 'update'">
          <span slot="content">修改员工</span>
        </template>
        <template v-else>
          <span slot="content">新增员工</span>
        </template>
      </el-page-header>
      <el-form ref="ruleForm"
               :model="ruleForm"
               :rules="rules"
               label-width="180px">
        <el-form-item label="账号:"
                      prop="username">
          <el-input v-model="ruleForm.username"
                    maxlength="20"
                    placeholder="请输入账号"/>
        </el-form-item>
        <el-form-item label="员工姓名:"
                      prop="name">
          <el-input v-model="ruleForm.name"
                    maxlength="12"
                    placeholder="请输入员工姓名"/>
        </el-form-item>
        <el-form-item label="手机号:"
                      prop="phone">
          <el-input v-model="ruleForm.phone"
                    maxlength="11"
                    placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="性别:"
                      prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <div>
          <div class="subBox">
            <el-button type="primary" @click="submitForm('ruleForm',false)">保存</el-button>
            <el-button
                v-if="this.optType ==='add'"
                type="primary"
                @c1ick="submitForm('ruleForm',true)">保存并继续添加员工
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      title: '',
      optType: 'add',

      ruleForm: {
        id: '',
        name: '',
        phone: '',
        sex: '1',
        username: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入员工姓名', trigger: 'blur'},
          {validator: this.validator, trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {validator: this.checkphone, trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'blur'}
        ],
      },

    }
  },
  created() {
    //看是否携带参数过来，携带的话就使用更新
    this.optType = this.$route.query.id ? 'update' : 'add'
    if (this.optType === 'update') {

      request.get(`/admin/employee/${this.$route.query.id}`).then(res => {
        if (res.code === 1) {
          this.ruleForm = res.data
        }
      })
    }
  },
  methods: {
    goBack() {
      this.$router.push('/employee')
    },
    checkphone(rule, value, callback) {
      let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!phoneReg.test(value)) {
        //引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    },
    validator(rule, value, callback){
      const reg = /^[\u4e00-\u9fa5_a-zA-Z]{1,12}$/
      if (!value) {
        callback(new Error('请输入员工姓名'))
      } else if (!reg.test(value)){
          callback(new Error('姓名输入不符，请输入1-12个字符'))
      }else {
        callback()
      }
    },

    submitForm(formName, isContinue) {
      //$refs是引用的ref属性，通过ref可以获取到组件实例，通过实例可以调用组件的方法
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.optType === 'add') {      //新增操作
            request.post('/admin/employee', this.ruleForm).then(res => {
              if (res.code === 1) {
                this.$message.success('保存成功')
                if (isContinue) {
                  this.ruleForm = {
                    name: '',
                    phone: '',
                    sex: '1',
                    username: ''
                  }
                } else {
                  this.$router.push('/employee')
                }
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {     //修改操作
            // console.log(this.ruleForm)
            request.put('/admin/employee', this.ruleForm).then(res => {
              if (res.code === 1) {
                this.$message.success('修改成功')
                this.$router.push('/employee')
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    },
  }
}

</script>

<style>
.container {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 30px;
  border-radius: 4px;

  .subBox {
    padding-top: 30px;
    text-align: center;
    border-top: solid 1px $gray-5;
  }
}


.el-form-item {
  margin-bottom: 29px;
}

.el-input {
  width: 293px;
}


</style>
